<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        th,
        td {
            padding: 10px;
        }
        th {
            background-color: #333;
            color: #fff;
            text-align: left;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .btn {
            display: inline-block;
            padding: 5px 10px;
            background-color: #333;
            color: #fff;
            text-decoration: none;
            border-radius: 3px;
        }
        .btn:hover {
            background-color: #555;
        }
    </style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>用户列表</h1>
<table>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>状态</th>
        <th>描述</th>
        <th>注册时间</th>
        <th>操作</th>
    </tr>
    <tr th:each="u:${list}">
        <td th:text="${uStat.count}">1</td>
        <td th:text="${u.name}">John Doe</td>
        <td th:text="${u.age}">25</td>
        <td>
            <span th:if="${u.sex == 1}">男</span>
            <span th:if="${u.sex == 0}">女</span>
        </td>
        <!-- 0无效，1有效，2黑名单，3锁定。。。。-->
        <td>
           <div th:switch="${u.status}">
               <span th:case="0">无效</span>
               <span th:case="1">有效</span>
               <span th:case="2">黑名单</span>
               <span th:case="3">锁定</span>
               <span th:case="*">其他</span>
           </div>
        </td>
        <td th:text="${u.remark}">Lorem ipsum dolor sit amet</td>
        <td>
            <span th:text="${#dates.format(u.createTime,'yyyy-MM-dd : HH:mm:ss')}"></span>
        </td>
        <td>
            <button onclick="toAdd()">添加</button>
            <button>编辑</button>
            <button th:onclick="|deleteUserById(${u.id})|">删除</button>
        </td>
    </tr>
</table>
<script type="text/javascript">
    function toAdd(){
        window.location.href="[[@{/user/toAdd}]]";
    }
    function deleteUserById(id){
        // 确定要删除吗 confirm
        const result = confirm("您确定要删除此文件吗？");
        if (result) {
            // 删除文件
            $.ajax({
                type: "GET",
                url: "[[@{/user/deleteUserById}]]",
                data:{"id":id},
                success:function (msg){
                    console.log(msg)
                    if (msg === 1){
                        alert("删除成功")
                        window.location.href="[[@{/user/toUserList}]]"
                    }
                }
            })
        } else {
            // 取消删除文件

        }
    }
</script>
</body>
</html>